<template>
  <view class="legal-page">
    <!-- 顶部导航栏 -->
   <!-- <view class="navbar">
      <view class="back-btn" @click="navigateBack">
        <icon type="left" size="24" color="#333"></icon>
      </view>
      <view class="nav-title">服务条款与隐私政策</view>
    </view> -->
    
    <!-- 内容切换标签 -->
    <view class="tabs">
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'terms' }"
        @click="activeTab = 'terms'"
      >
        <text class="tab-text">服务条款</text>
        <view class="tab-indicator" :class="{ show: activeTab === 'terms' }"></view>
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'privacy' }"
        @click="activeTab = 'privacy'"
      >
        <text class="tab-text">隐私政策</text>
        <view class="tab-indicator" :class="{ show: activeTab === 'privacy' }"></view>
      </view>
    </view>
    
    <!-- 条款内容区域 -->
    <scroll-view class="content-scroll" scroll-y="true">
      <view class="content-container" v-if="activeTab === 'terms'">
        <view class="terms-content">
          <h1 class="main-title">服务条款</h1>
          <p class="update-date">最后更新日期：2023年10月15日</p>
          
          <section class="section">
            <h2 class="section-title">1. 接受条款</h2>
            <p class="section-text">
              欢迎使用我们的应用服务。通过访问或使用本应用，您同意遵守本服务条款。如果您不同意本条款的任何部分，请不要使用我们的服务。
            </p>
          </section>
          
          <section class="section">
            <h2 class="section-title">2. 服务说明</h2>
            <p class="section-text">
              本应用提供智能设备管理、内容分享和社交互动等服务。我们保留随时修改、暂停或终止部分或全部服务的权利，且不承担提前通知的义务。
            </p>
          </section>
          
          <section class="section">
            <h2 class="section-title">3. 用户账号</h2>
            <p class="section-text">
              您需要创建一个账号才能使用我们的部分服务。您应对账号下的所有活动和行为负责，并妥善保管您的账号信息。如发现任何未经授权使用您账号的情况，请立即通知我们。
            </p>
          </section>
          
          <section class="section">
            <h2 class="section-title">4. 用户行为规范</h2>
            <p class="section-text">
              使用本服务时，您同意不从事以下行为：
            </p>
            <ul class="list">
              <li>违反任何适用的法律法规</li>
              <li>发布或传播任何非法、有害、威胁、辱骂、骚扰、诽谤、淫秽或其他不当内容</li>
              <li>侵犯任何第三方的知识产权或其他权利</li>
              <li>干扰或破坏本服务的正常运行</li>
              <li>尝试未经授权访问本服务的任何部分或功能</li>
            </ul>
          </section>
          
          <section class="section">
            <h2 class="section-title">5. 知识产权</h2>
            <p class="section-text">
              本应用内的所有内容，包括但不限于文字、图像、音频、视频、软件等，均受知识产权法保护。未经我们书面许可，您不得复制、分发、传播、展示、修改或创建衍生作品。
            </p>
          </section>
          
          <section class="section">
            <h2 class="section-title">6. 免责声明</h2>
            <p class="section-text">
              本服务按"现状"提供，我们不对服务的可用性、可靠性或准确性做出任何明示或暗示的保证。您使用本服务的风险由您自行承担。在法律允许的最大范围内，我们不对任何因使用或无法使用本服务而导致的直接或间接损失承担责任。
            </p>
          </section>
          
          <section class="section">
            <h2 class="section-title">7. 条款修改</h2>
            <p class="section-text">
              我们保留随时修改本服务条款的权利。当条款发生重大变更时，我们将通过应用内通知或其他适当方式通知您。您继续使用本服务即视为接受修改后的条款。
            </p>
          </section>
          
          <section class="section">
            <h2 class="section-title">8. 法律适用与管辖</h2>
            <p class="section-text">
              本服务条款受中华人民共和国法律管辖。因本条款引起的或与本条款有关的任何争议，应首先通过友好协商解决；协商不成的，应提交服务提供方所在地有管辖权的法院诉讼解决。
            </p>
          </section>
          
          <section class="section">
            <h2 class="section-title">9. 联系我们</h2>
            <p class="section-text">
              如果您对本服务条款有任何疑问，请通过以下方式联系我们：
            </p>
            <p class="contact-info">客服邮箱：support@example.com</p>
            <p class="contact-info">客服电话：400-123-4567</p>
          </section>
        </view>
      </view>
      
      <view class="content-container" v-if="activeTab === 'privacy'">
        <view class="privacy-content">
          <h1 class="main-title">隐私政策</h1>
          <p class="update-date">最后更新日期：2023年10月15日</p>
          
          <section class="section">
            <h2 class="section-title">1. 引言</h2>
            <p class="section-text">
              我们尊重并保护所有使用本应用用户的个人隐私权。本隐私政策旨在说明我们如何收集、使用、存储和保护您的个人信息。使用本应用即表示您同意我们按照本政策收集和使用您的信息。
            </p>
          </section>
          
          <section class="section">
            <h2 class="section-title">2. 收集的信息</h2>
            <p class="section-text">
              我们可能收集以下类型的信息：
            </p>
            <ul class="list">
              <li>您提供的信息：如注册时提供的姓名、电子邮件地址、电话号码等</li>
              <li>使用信息：如您使用本服务的方式、频率、偏好等</li>
              <li>设备信息：如您的设备型号、操作系统、唯一设备标识符等</li>
              <li>位置信息：在您同意的情况下，我们可能收集您的位置信息，以提供相关服务</li>
            </ul>
          </section>
          
          <section class="section">
            <h2 class="section-title">3. 信息的使用</h2>
            <p class="section-text">
              我们可能将收集的信息用于以下目的：
            </p>
            <ul class="list">
              <li>提供、维护和改进我们的服务</li>
              <li>开发新功能和服务</li>
              <li>理解用户如何使用我们的服务，以优化用户体验</li>
              <li>向您发送重要通知，如服务变更或条款更新</li>
              <li>在获得您同意的情况下，向您提供个性化内容和广告</li>
            </ul>
          </section>
          
          <section class="section">
            <h2 class="section-title">4. 信息的保护</h2>
            <p class="section-text">
              我们采用行业标准的安全措施保护您的个人信息，防止未经授权的访问、使用或泄露。但请注意，互联网上的信息传输并非完全安全，我们不能保证您的信息传输是绝对安全的。
            </p>
          </section>
          
          <section class="section">
            <h2 class="section-title">5. 信息的分享</h2>
            <p class="section-text">
              我们不会向第三方出售您的个人信息。在以下情况下，我们可能会分享您的信息：
            </p>
            <ul class="list">
              <li>获得您的明确同意</li>
              <li>为了提供您要求的服务，而必须与我们的合作伙伴共享</li>
              <li>遵守适用的法律法规、法院命令或政府要求</li>
              <li>保护我们的合法权益、隐私或安全，以及用户或公众的安全</li>
            </ul>
          </section>
          
          <section class="section">
            <h2 class="section-title">6. 您的权利</h2>
            <p class="section-text">
              您有权访问、更正或删除您的个人信息。您也可以随时撤回您的同意，或要求我们停止使用您的信息。如需行使这些权利，请联系我们的客服。
            </p>
          </section>
          
          <section class="section">
            <h2 class="section-title">7. 政策修改</h2>
            <p class="section-text">
              我们可能会不时更新本隐私政策。当政策发生重大变更时，我们将通过应用内通知或其他方式通知您。建议您定期查阅本政策，了解我们如何保护您的信息。
            </p>
          </section>
          
          <section class="section">
            <h2 class="section-title">8. 联系我们</h2>
            <p class="section-text">
              如果您对本隐私政策有任何疑问或建议，请联系我们：
            </p>
            <p class="contact-info">隐私事务邮箱：privacy@example.com</p>
            <p class="contact-info">客服电话：400-123-4567</p>
          </section>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 激活的标签页，默认显示服务条款
      activeTab: 'terms'
    };
  },
  methods: {
    // 返回上一页
    navigateBack() {
      uni.navigateBack({
        delta: 1
      });
    }
  }
};
</script>

<style lang="scss" scoped>
// 变量定义
$color-primary: #007aff;
$color-text-primary: #333333;
$color-text-secondary: #666666;
$color-text-tertiary: #999999;
$color-border: #eeeeee;
$color-background: #f5f5f7;
$color-white: #ffffff;

$font-size-xs: 12px;
$font-size-sm: 14px;
$font-size-md: 16px;
$font-size-lg: 18px;
$font-size-xl: 20px;

$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;
$spacing-xl: 32px;

.legal-page {
  background-color: $color-background;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

// 导航栏样式
.navbar {
  height: 44px;
  background-color: $color-white;
  display: flex;
  align-items: center;
  padding: 0 $spacing-md;
  border-bottom: 1px solid $color-border;
  position: sticky;
  top: 0;
  z-index: 10;

  .back-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav-title {
    flex: 1;
    text-align: center;
    font-size: $font-size-lg;
    font-weight: bold;
    color: $color-text-primary;
  }
}

// 标签页样式
.tabs {
  display: flex;
  background-color: $color-white;
  border-bottom: 1px solid $color-border;
  position: sticky;
  top: 0px;
  z-index: 10;

  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: $spacing-md 0;
    position: relative;

    .tab-text {
      font-size: $font-size-md;
      color: $color-text-secondary;
    }

    .tab-indicator {
      position: absolute;
      bottom: 0;
      width: 40px;
      height: 3px;
      background-color: $color-primary;
      border-radius: 3px;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    &.active {
      .tab-text {
        color: $color-primary;
        font-weight: 500;
      }

      .tab-indicator.show {
        opacity: 1;
      }
    }
  }
}

// 内容滚动区域
.content-scroll {
  flex: 1;
  height: calc(100vh - 44px - 50px);
}

.content-container {
  padding: $spacing-lg $spacing-md;
  background-color: $color-white;
}

// 条款内容样式
.main-title {
  font-size: $font-size-xl;
  color: $color-text-primary;
  font-weight: bold;
  margin-bottom: $spacing-md;
  text-align: center;
}

.update-date {
  font-size: $font-size-xs;
  color: $color-text-tertiary;
  text-align: center;
  margin-bottom: $spacing-xl;
  display: block;
}

.section {
  margin-bottom: $spacing-lg;

  .section-title {
    font-size: $font-size-lg;
    color: $color-text-primary;
    font-weight: 600;
    margin-bottom: $spacing-sm;
  }

  .section-text {
    font-size: $font-size-md;
    color: $color-text-secondary;
    line-height: 1.8;
    margin-bottom: $spacing-md;
  }

  .list {
    padding-left: $spacing-lg;
    margin-bottom: $spacing-md;

    li {
      font-size: $font-size-md;
      color: $color-text-secondary;
      line-height: 1.8;
      margin-bottom: $spacing-xs;
      list-style-type: disc;
    }
  }

  .contact-info {
    font-size: $font-size-md;
    color: $color-text-secondary;
    line-height: 1.8;
  }
}
</style>
    